<template>
  <div class="tags">
    <Row :gutter="18">
      <i-col span="5">
        <Menu @on-select="setIndex" :style="{width: '100%'}">
          <MenuItem v-for="(item, index) in listTags"  :key="item.id" :name="index">{{item.name}}</MenuItem>
        </Menu>
      </i-col>
      <i-col span="19">
        <Row :gutter="16">
          <!--标签信息编辑-->
          <i-col span="9">
            <Form ref="tags" :model="tags" :rules="ruleCustom" :label-width="80">
              <FormItem prop="name">
                <i-input v-model="tags.name" :readonly="!isEdit" size="large" placeholder="标签名"/>
              </FormItem>
              <FormItem  prop="describe">
                <i-input v-model="tags.describe" :readonly="!isEdit" :style="{marginTop: '15px', backgroundColor: '#fff'}" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="标签描述" />
              </FormItem>
            </Form>
          </i-col>
          <!--标签信息编辑-->
          <i-col span="6" :style="{textAlign: 'center'}">
            <Tooltip content="是否开启编辑标签信息！" placement="top">
              <i-switch size="large" :before-change="changeEdit">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
              </i-switch>
            </Tooltip>
            <br/>

            <Button v-show="isEdit" :loading="loading" @click="confirm" style="margin-top: 15px" type="primary" shape="circle">
              <span v-if="!loading">确认修改</span>
              <span v-else>修改中。。。。</span>
            </Button>
            <br/>
            <Button :loading="addLoading" @click="addShow" icon="ios-add-circle-outline" style="margin-top: 15px" type="info" shape="circle">
              <span v-if="!addLoading">增加标签</span>
              <span v-else>增加中。。。。</span>
            </Button>

          </i-col>
          <i-col span="9" :style="{textAlign: 'center'}">
            <div v-show="addLoading">
              <Form ref="addTags" :model="addTags" :rules="ruleCustom" :label-width="80">
                <FormItem prop="name">
                  <i-input v-model="addTags.name" clearable size="large" placeholder="标签名"/>
                </FormItem>
                <FormItem  prop="describe">
                  <i-input v-model="addTags.describe" :style="{backgroundColor: '#fff'}" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="标签描述" />
                </FormItem>
                <ButtonGroup shape="circle" size="large">
                  <Button size="large" @click="cancel" type="error">
                    <Icon type="ios-arrow-back" />
                    取消
                  </Button>
                  <Button @click="add"  size="large" type="info">
                    确认
                    <Icon type="ios-arrow-forward" />
                  </Button>
                </ButtonGroup>
              </Form>
            </div>
          </i-col>
        </Row>

        <Divider :style="{color: '#3399FF'}">{{articleLength}}篇文章</Divider>

        <!--分类中的文章-->
        <div :style="{ width: '80%'}">
          <List>
            <ListItem v-for="(item, index) in articleList" :key="index">
              <ListItemMeta avatar="http://dd.ddandang.top/blog/images/images.jpg" :title="item.title" :description="item.description" />
              <template slot="action">
                <li>
                  <a @click="remove(item.id)">移除</a>
                </li>
              </template>
            </ListItem>
          </List>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import {updateTags, insertTags,
    allTags, listClassificationVoByTagsId, removeArticleTags} from "@/network/classification";
  export default {
    name: "Tags",
    data() {
      const validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('标签名不能为空！'));
        } else if (value.length > 10) {
          callback(new Error('标签名字数不能大于10'));
        } else {
          callback();
        }
      };
      const validateDescribe = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('标签描述不能为空！'));
        } else if (value.length > 100) {
          callback(new Error('标签描述字数不能大于100'));
        } else {
          callback();
        }
      };
      return {
        //文章信息
        articleList: [],
        articleLength: 0,
        listTags: [],
        //标签的下标
        index: 0,
        //选中标签名
        name: '',
        //选中标签描述
        description: '',
        loading: false,
        addLoading: false,
        isEdit: false,
        tags: {
          name: '',
          describe: ''
        },
        addTags: {
          name: '',
          describe: ''
        },
        ruleCustom: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          describe: [
            { validator: validateDescribe, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      //切换编辑状态
      changeEdit() {
        this.isEdit = !this.isEdit;
        this.$refs['tags'].resetFields();
        this.tags.name = this.name;
        this.tags.describe = this.description;
      },
      confirm() {
        this.$refs['tags'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.loading = false;
            updateTags(this.listTags[this.index].id, this.tags.name, this.tags.describe)
            .then( res => {
              if(res.code === 2000) {
                this.name = this.tags.name;
                this.describe = this.tags.description;
                this.$Message.success('更新成功!');
              }else {
                this.$Message.error('修改失败！');
              }
            }).catch( () => {
              this.$Message.error('修改失败！');
            })
          } else {
            this.$Message.error('请按要求填写信息!');
          }
        })
      },
      //增加标签的框显示
      addShow() {
        this.addLoading = !this.addLoading;
      },
      cancel() {
        this.addLoading = !this.addLoading;
        this.$refs['addTags'].resetFields();
      },
      add() {
        this.$refs['addTags'].validate((valid) => {
          if (valid) {
            this.addLoading = !this.addLoading;
            insertTags(this.addTags.name, this.addTags.describe)
            .then(res => {
              if (res.code === 2000) {
                this.$Message.success('增加标签成功!');
                this.$refs['addTags'].resetFields();
              }

            }).catch(() => {
              this.$Message.error('增加标签失败!');
            })
          } else {
            this.$Message.error('请按要求填写信息!');
          }
        })
      },
      remove(articleId) {
        this.$Modal.confirm({
          title: '移除文章',
          content: '<p>确认将此文章从分类中移除？</p>',
          onOk: () => {
            let tagsId = this.listTags[this.index].id;
            removeArticleTags(articleId, tagsId).then(res => {
              if(res.code === 2000) {
                this.$Message.success('移除成功!');
                this.listClassificationVoByTagsId();
              }else {
                this.$Message.error('移除失败!');
              }
            })
          },
          onCancel: () => {
            this.$Message.info('Clicked cancel');
          }
        });
      },
      getTagsList() {
        allTags().then( res => {
          this.listTags = res.data.tagsList;
          this.tags.name = this.name = res.data.tagsList[this.index].name;
          this.tags.describe = this.description = res.data.tagsList[this.index].description;
          this.listClassificationVoByTagsId();
        })
      },
      //选中标签更新标签Index
      setIndex(name) {
        this.index = name;
        this.tags.name = this.name = this.listTags[this.index].name;
        this.tags.describe = this.description =this.listTags[this.index].description;
        this.listClassificationVoByTagsId();
      },
      //获取当前标签中的文章
      listClassificationVoByTagsId() {
        let tagsId = this.listTags[this.index].id;
        listClassificationVoByTagsId(tagsId).then(res => {
          if(res.code === 2000) {
            this.articleList = res.data.listClassification;
            this.articleLength = res.data.listClassification.length;
          }
        })
      }
    },
    mounted() {
      this.getTagsList();
    }
  }
</script>

<style scoped>

</style>